<template>
  <!-- 事件添加的弹窗 -->
  <div id="event-popup" class="ol-popup">
    <div id="popup-content">
      <el-form :model="form" label-width="80px" style="width: 300px">
        <el-form-item label="事件编号">
          <el-input v-model="form.number" placeholder="请输入事件编号" />
        </el-form-item>
        <el-form-item label="事件类型">
          <el-select v-model="form.type" placeholder="请选择事件类型">
            <el-option label="刮擦" value="刮擦" />
            <el-option label="追尾" value="追尾" />
            <el-option label="碾压" value="碾压" />
            <el-option label="翻车" value="翻车" />
            <el-option label="失火" value="失火" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件等级">
          <el-select v-model="form.level" placeholder="请选择事件等级">
            <el-option label="轻微事故" value="1" />
            <el-option label="一般事故" value="2" />
            <el-option label="重大事故" value="3" />
            <el-option label="特大事故" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="发生时间">
          <el-date-picker v-model="form.data" type="datetime" placeholder="选择日期时间" />
        </el-form-item>
        <el-form-item label="发生地点">
          <el-input v-model="form.loaction" placeholder="请输入发生地点" />
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.CarNumber" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="驾驶员">
          <el-input v-model="form.driver" placeholder="请输入驾驶员" />
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="form.status" placeholder="请选择处理状态">
            <el-option label="待处理" value="0" />
            <el-option label="处理中" value="1" />
            <el-option label="已归档" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据信息">
          <el-autocomplete v-model="Info" :fetch-suggestions="queryInfo" :value-key="'name'" placeholder="选择数据信息" @select="handleSelect">
            <template #default="{ item }">
              <div class="name">{{ item.name }}</div>
              <div class="adress">地点: {{ item.adress }}</div>
              <div class="data">类型: {{ item.data }}</div>
              <div class="time">时间: {{ item.time }}</div>
              <el-divider />
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['handleCancel', 'handleSubmit', 'form'])
const { handleCancel, handleSubmit, form } = props
import axios from "axios"
import { ref, onMounted, watch } from "vue"
import { storeToRefs } from 'pinia'
import { useCommonStore } from '@/stores/common'
/* 引入公共状态管理对象 */
const store = useCommonStore()
const { isShowaddEven } = storeToRefs(store)

const InfoData = ref([])
const getInfoData = () => {
  axios.get('/api/information').then((res) => {
    InfoData.value = res.data.result
    console.log(InfoData.value)
  })
}
onMounted(() => {
  getInfoData()
})

const Info = ref('')
const queryInfo = (queryString, cb) => {
  const results = queryString ? InfoData.value.filter(createFilter(queryString)) : InfoData.value
  cb(results)
}
const createFilter = (query) => {
  return (InfoData) => {
    return (
      InfoData.name.toLowerCase().indexOf(query.toLowerCase()) === 0
    )
  }
}
const handleSelect = (item) => {
  form.driver = item.name
  form.loaction = item.adress
  form.type = item.data
  form.data = item.time
}
watch(isShowaddEven, (val) => {
  if (!val) {
    form.number = ''
    form.type = ''
    form.level = ''
    form.data = ''
    form.loaction = ''
    form.CarNumber = ''
    form.driver = ''
    form.status = ''
    Info.value = ''
  }
})
</script>

<style scoped>
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 45px;
  left: -50px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
</style>
